<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view
			style="display: flex; align-items: center; width: 100%; box-sizing: border-box; position: fixed; top: 0; left: 0; z-index: 99; background-color: #fff"
			:style="{ height: navheight + 'px', 'padding-top': hometop + 'px' }">
			<uni-icons type="left" size="20" @click="goback"
				style="position: relative; top: 0; left: 0; z-index: 999"></uni-icons>
			<view style="display: flex; align-items: center; flex: 1; justify-content: center; margin-left: -40rpx">
				<view style="font-weight: bold; font-size: 36rpx; color: #151515">{{ title }}</view>
				<image :src="gender == 1 ? '../../static/myimg/a8.png' : '../../static/myimg/a9.png'"
					style="width: 28rpx; height: 28rpx; padding-left: 16rpx" mode=""></image>
			</view>
			<view></view>
		</view>
		<!-- 站位盒子 -->
		<view :style="{ height: navheight + 'px', width: '100%' }" style="position: relative; top: 0; left: 0"></view>

		<!-- 聊天页面 -->
		<scroll-view v-if="scrollheight" ref="scrollview" :refresher-triggered="refresh" :refresher-enabled="false"
			@scrolltoupper="gethistory" :scroll-with-animation="true" :scroll-into-view="messageid" scroll-y="true"
			:scroll-top="scrollTop"
			:style="{ height: scrollheight, paddingBottom: '20rpx', 'box-sizing': 'border-box' }">
			<view :id="i.masageid" style="padding: 0 30rpx" v-for="(i, k) in msglist" :key="k">
				<!-- 交换微信卡片 -->
				<view class="jiaohuan" v-if="i.content.type == 1">
					<view class="header">
						<view
							style="font-weight: 400; font-size: 32rpx; color: #151515; text-align: center; padding: 28rpx 0 44rpx 0">
							温馨提示</view>
						<view style="font-weight: bold; font-size: 32rpx; color: #151515; text-align: center">
							{{ userid != i.senderUserId ? '确定与对方交换微信吗？' : '您的申请已发送' }}
						</view>
					</view>
					<view class="btn">
						<view @click="refuse(i)" style="
                width: 192rpx;
                height: 68rpx;
                background: #f8f8f8;
                border-radius: 34rpx 34rpx 34rpx 34rpx;
                text-align: center;
                line-height: 68rpx;
                font-weight: 400;
                font-size: 24rpx;
                color: #666666;
              ">
							拒绝
						</view>
						<view @click="agree(i)" style="
                width: 192rpx;
                height: 68rpx;
                background: #37c1ff;
                border-radius: 34rpx 34rpx 34rpx 34rpx;
                text-align: center;
                line-height: 68rpx;
                font-weight: 400;
                font-size: 24rpx;
                color: #ffffff;
              ">
							确定
						</view>
					</view>
				</view>
				<!-- 拒绝交换 -->
				<view v-if="i.content.type == 2 && userid != i.senderUserId"
					style="text-align: center; font-size: 24rpx; color: #999999; margin-top: 20rpx">对方拒绝交换微信</view>
				<!-- 微信号 -->
				<view class="wechatcard" v-if="i.content.type == 3">
					<view
						style="text-align: center; font-weight: 400; font-size: 32rpx; color: #151515; padding-top: 24rpx">
						微信号</view>
					<view
						style="text-align: center; font-weight: 400; font-size: 32rpx; color: #151515; margin-top: 8rpx; margin-bottom: 24rpx">
						{{ userid == i.senderUserId ? (otherwechat ? otherwechat : '对方未设置微信号') : wechat ? otherwechat : '对方未设置微信号' }}
					</view>
					<view class="copy"
						@click="copyfn(userid == i.senderUserId ? (otherwechat ? otherwechat : '对方未设置微信号') : wechat ? otherwechat : '对方未设置微信号')">
						复制</view>
				</view>
				<!-- 时间 -->
				<view v-if="k % 20 == 0"
					style="font-size: 24rpx; color: #999999; display: flex; align-items: center; justify-content: center; margin-top: 64rpx; margin-bottom: 60rpx">
					{{ msglist[k] ? util.timeChange2(msglist[k].sentTime) : '' }}
				</view>
				<view class="left"
					v-if="userid != i.senderUserId && i.content.type != 1 && i.content.type != 2 && i.content.type != 3">
					<image :src="img_url + JSON.parse(i.content.extra).sendHead"
						style="width: 100rpx; height: 100rpx; border-radius: 12rpx 12rpx 12rpx 12rpx; margin-right: 20rpx"
						mode="aspectFill" @tap="util.urlTo('/dynamic/userhome/userhome?userid=' + i.senderUserId)">
					</image>
					<view style="position: relative">
						<view
							style="position: absolute; left: 5%; max-width: 550rpx; overflow: hidden; white-space: nowrap">
							{{ JSON.parse(i.content.extra).sendName }}
						</view>
						<!-- 占位 -->
						<view style="height: 50rpx"></view>
						<!-- 文本显示 -->
						<view v-if="i.messageType == 'RC:TxtMsg'" style="
                border-radius: 0rpx 100rpx 100rpx 100rpx;
                font-weight: 500;
                font-size: 28rpx;
                color: #151515;
                padding-top: 30rpx;
                background-color: #f4f4f4;
                padding: 18rpx 37rpx;
                max-width: 540rpx;
                box-sizing: border-box;
                white-space: wrap;
              ">
							{{ i.content.content }}
						</view>
						<!-- 图片 -->
						<view class="" v-if="i.messageType == 'RC:ImgMsg'">
							<image :src="i.content.imageUri" mode="aspectFill" style="width: 180rpx; height: 180rpx"
								@tap="util.seeimg([i.content.imageUri], 1)"></image>
						</view>
						<!-- 语音显示 -->
						<view v-if="i.messageType == 'RC:HQVCMsg'" style="
                box-sizing: border-box;
                padding: 0 20rpx;
                width: 260rpx;
                height: 72rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-left: 16rpx;
                border-radius: 0rpx 100rpx 100rpx 100rpx;
                background-color: #f4f4f4;
              " @tap="onPlay(i.content.remoteUrl)">
							<text>{{ Math.ceil(Number(i.content.duration) / 1000) }}</text>
							<image src="../../static/dynamicimg/leftvoice.png" style="width: 32rpx; height: 40rpx"
								mode=""></image>
						</view>
					</view>
				</view>
				<view class="right"
					v-if="userid == i.senderUserId && i.content.type != 1 && i.content.type != 2 && i.content.type != 3">
					<view style="position: relative">
						<view style="position: absolute; right: 5%">我</view>
						<!-- 占位 -->
						<view style="height: 50rpx"></view>
						<!-- 文本提示 -->
						<view v-if="i.messageType == 'RC:TxtMsg'" style="
                border-radius: 100rpx 0rpx 100rpx 100rpx;
                font-weight: 500;
                font-size: 28rpx;
                color: #151515;
                font-weight: 400;
                font-size: 28rpx;
                color: #151515;
                background-color: #feff01;
                padding: 18rpx 37rpx;
                max-width: 540rpx;
                box-sizing: border-box;
              ">
							{{ i.content.content }}
						</view>
						<!-- 图片 -->
						<view class="" v-if="i.messageType == 'RC:ImgMsg'">
							<image :src="i.content.imageUri" mode="aspectFill" style="width: 180rpx; height: 180rpx"
								@tap="util.seeimg([i.content.imageUri], 1)"></image>
						</view>

						<!-- 语音提示 -->
						<view v-if="i.messageType == 'RC:HQVCMsg'" style="
                box-sizing: border-box;
                padding: 0 20rpx;
                width: 260rpx;
                height: 72rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-right: 16rpx;
                background-color: #feff01;
                border-radius: 100rpx 0rpx 100rpx 100rpx;
              " @tap="onPlay(i.content.remoteUrl)">
							<image src="../../static/dynamicimg/rightvoice.png" style="width: 32rpx; height: 40rpx"
								mode=""></image>
							<text>{{ Math.ceil(Number(i.content.duration) / 1000) }}</text>
						</view>
					</view>
					<image :src="img_url + JSON.parse(i.content.extra).sendHead"
						style="width: 100rpx; height: 100rpx; border-radius: 12rpx 12rpx 12rpx 12rpx; margin-left: 20rpx"
						mode="aspectFill"></image>
				</view>
			</view>
		</scroll-view>

		<view class="" :style="{ height: morecaozuo && !emojishow ? '156rpx' : '462rpx' }"></view>
		<!-- 键盘 -->
		<view class="keybord"
			:style="{ height: morecaozuo && !emojishow ? '156rpx' : '462rpx', bottom: keybordheight > 0 ? keybordheight + 'px' : '' }">
			<view style="display: flex; justify-content: space-evenly; align-items: center">
				<!-- 	<image v-if="false" @click="iskeybord = !iskeybord" src="../../static/dynamicimg/voice.png"
					style="width: 60rpx; height: 60rpx" mode=""></image>
				<image v-else src="../../static/dynamicimg/keybord.png" style="width: 60rpx; height: 60rpx" mode="">
				</image> -->
				<textarea @focus="huifu2" @blur="hiufu" :confirm-hold="true" :show-confirm-bar="false"
					:hold-keyboard="true" :adjust-position="false" maxlength="-1" v-if="iskeybord" type="text"
					placeholder="请输入"
					style="width: 446rpx; height: 76rpx; background: #f8f8f8; border-radius: 100rpx 100rpx 100rpx 100rpx; padding-left: 24rpx; padding-top: 15rpx"
					v-model="content"></textarea>
				<!--    <input
          v-if="iskeybord"
          type="text"
          placeholder="请输入"
          style="width: 446rpx; height: 76rpx; background: #f8f8f8; border-radius: 100rpx 100rpx 100rpx 100rpx; padding-left: 24rpx"
          @confirm="send"
          v-model="content"
        /> -->
				<view v-else @longpress="sendvoice" @touchend="overvoice"
					style="width: 446rpx; height: 76rpx; background: #f8f8f8; border-radius: 100rpx 100rpx 100rpx 100rpx; text-align: center; line-height: 76rpx">
					松开 发送
				</view>
				<image src="../../static/dynamicimg/emjoy.png" style="width: 60rpx; height: 60rpx" mode=""
					@click="emojishow = !emojishow"></image>
				<image v-if="morecaozuo" @click="(emojishow = false), (morecaozuo = !morecaozuo)"
					src="../../static/dynamicimg/caozuo.png" style="width: 60rpx; height: 60rpx" mode=""></image>
				<image @click="morecaozuo = !morecaozuo" src="../../static/messageimg/d2.png"
					style="width: 60rpx; height: 60rpx" v-else mode=""></image>
				<view @click="send" v-if="true"
					style="width: 120rpx; height: 60rpx; background-color: limegreen; color: #fff; font-size: 30rpx; text-align: center; line-height: 60rpx; border-radius: 10rpx">
					发送
				</view>
			</view>
			<view style="display: flex; align-items: center" v-if="emojishow">
				<scroll-view scroll-y="true" style="height: 300rpx">
					<view class="" style="display: flex; align-items: center; flex-wrap: wrap; padding: 10rpx">
						<view class="" v-for="(i, k) in faceList" :key="k" style="font-size: 60rpx;line-height: 64rpx;"
							@tap="bq(k)">
							{{ i }}
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 更多操作 -->
			<view style="display: flex; align-items: center; margin-top: 82rpx" v-if="!morecaozuo">
				<view style="text-align: center; margin-left: 64rpx" @tap="sendimg">
					<image src="../../static/dynamicimg/sendimg.png" style="width: 112rpx; height: 112rpx" mode="">
					</image>
					<view>图片</view>
				</view>
				<view style="text-align: center; margin-left: 64rpx" @click="jiaohuanwechat">
					<image src="../../static/dynamicimg/changeweixin.png" style="width: 112rpx; height: 112rpx" mode="">
					</image>
					<view>交换微信</view>
				</view>
				<view style="text-align: center; margin-left: 64rpx" @click="$refs.lahei.open()">
					<image src="../../static/dynamicimg/lahei.png" style="width: 112rpx; height: 112rpx" mode="">
					</image>
					<view>拉黑</view>
				</view>
			</view>
		</view>
		<!-- 语音弹框 -->
		<uni-popup ref="voice" type="center">
			<view class="voice">
				<image src="../../static/dynamicimg/voiceicon.png" style="width: 88rpx; height: 132rpx" mode=""></image>
				<view style="font-weight: 400; font-size: 28rpx; color: #ffffff">手指上滑，取消发送</view>
			</view>
		</uni-popup>
		<!-- 交换微信弹框 -->
		<uni-popup ref="popup" type="center">
			<view class="box">
				<view style="position: relative; top: 0; left: 0">
					<image src="../../static/indeximg/pupopbgc.png" style="width: 580rpx; height: 232rpx" mode="">
					</image>
					<viwe
						style="font-weight: 400; font-size: 32rpx; color: #151515; position: absolute; top: 28rpx; left: 194rpx">
						申请进入群组</viwe>
					<view
						style="display: flex; align-items: center; position: absolute; top: 120rpx; left: 0rpx; width: 100%">
						<view
							style="width: 100%; text-align: center; font-weight: bold; font-size: 36rpx; color: #151515; padding-left: 24rpx">
							{{ wechat }}
						</view>
					</view>
				</view>
				<view style="display: flex; align-items: center; justify-content: space-evenly">
					<view @click="$refs.popup.close()" style="
              width: 192rpx;
              height: 68rpx;
              background: #f8f8f8;
              border-radius: 34rpx 34rpx 34rpx 34rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #666666;
              text-align: center;
              line-height: 68rpx;
            ">
						取消
					</view>
					<view @click="changewechat" style="
              width: 192rpx;
              height: 68rpx;
              background: #37c1ff;
              border-radius: 34rpx 34rpx 34rpx 34rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #ffffff;
              text-align: center;
              line-height: 68rpx;
            ">
						发送申请
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 拉黑 -->
		<uni-popup ref="lahei" type="center">
			<view class="box">
				<view
					style="font-weight: 500; font-size: 32rpx; color: #333333; text-align: center; margin: 0rpx 0 40rpx 0; padding-top: 32rpx">
					拉黑</view>
				<view
					style="font-weight: 500; font-size: 32rpx; color: #333333; text-align: center; margin-bottom: 52rpx">
					确认拉黑该用户吗？</view>
				<view style="display: flex; justify-content: space-evenly; border-top: 2rpx solid #e8e8e8">
					<view @click="$refs.lahei.close()"
						style="height: 108rpx; width: 285rpx; text-align: center; line-height: 108rpx; border-right: 2rpx solid #e8e8e8">
						取消</view>
					<view style="height: 108rpx; width: 285rpx; text-align: center; line-height: 108rpx"
						@click="laheitouser">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const RongIMLib = require('@rongcloud/imlib-next');
	const record = uni.getRecorderManager();
	const audio = uni.createInnerAudioContext();
	import faceList from '../../utils/emoji.js';
	export default {
		data() {
			return {
				otherjiaohuanid: '',
				jiaohuanid: '',
				showsend: false,
				refresh: false,
				messageid: '',
				screen: 0,
				scrollTop: 999999,
				keybordheight: 0,
				hometop: '',
				navheight: '',
				morecaozuo: true,
				iskeybord: true,
				id: '',
				extra: {
					sendName: '',
					sendHead: '',
					receiveName: '',
					receiveHead: '',
					allnum: ''
				},
				content: '',
				msglist: [],
				img_url: this.img_url,
				userid: uni.getStorageSync('user').id,
				// 录音开始时间，用于计算录音时长
				recordStartTime: 0,
				// 延时录音定时器
				recordTimer: null,
				faceList,
				emojishow: false,
				inrecord: false, // 是否处于录音状态
				title: '',
				gender: '',
				text: 'PRIVATE',
				wechat: '', // 用户微信
				otherwechat: '' // 对方用户微信
			};
		},
		computed: {
			scrollheight() {
				if (!this.morecaozuo || this.emojishow) {
					return this.screen - this.navheight - 78 - this.keybordheight + 'px';
				} else {
					return this.screen - this.navheight - 78 - this.keybordheight + 'px';
				}
				// if (this.morecaozuo && !this.emojishow) {
				//   return this.screen - this.navheight - 78 - this.keybordheight + 'px';
				// } else {
				//   return this.screen - this.navheight - 231 - this.keybordheight + 'px';
				// }
			}
		},
		watch: {
			emojishow(value) {
				console.log('表情的', value);
				if (value) {
					uni.hideKeyboard();
					this.morecaozuo = true;
				}
			},
			morecaozuo(value) {
				console.log('更多操作的', value);
				if (!value) {
					uni.hideKeyboard();
					this.emojishow = false;
				}
			}
		},

		onLoad(op) {
			uni.onKeyboardHeightChange(this.onKeyboardHeightChange);
			// console.log('对方的id', op.id);
			this.id = op.id;
			const app = getApp();
			this.screen = app.globalData.system.screenHeight;
			this.hometop = app.globalData.capsule.top; // 胶囊到顶部的距离
			this.navheight = (app.globalData.capsule.top - app.globalData.system.statusBarHeight) * 2 + app.globalData
				.capsule.height + app.globalData.system.statusBarHeight; // 头部盒子的高度
		},
		onShow() {
			this.$nextTick(() => {
				setTimeout(() => {
					this.next(1);
				}, 100);
			});
			this.getuserwechat();
			this.detail();
			this.getGroupRes();
			const Events = RongIMLib.Events;
			const to_id = this.id;
			const listener = (evt) => {
				console.log(evt.messages, '监听消息改变');
				if (evt.messages[0].content.applyid) {
					this.otherjiaohuanid = evt.messages[0].content.applyid;
				}
				if (this.msglist[this.msglist.length - 1].messageUId == evt.messages[0].messageUId) {
					return;
				}
				//防止串聊
				if (evt.messages[0].conversationType == 1 && this.id == evt.messages[0].targetId) {
					evt.messages[0].masageid = 'msg' + evt.messages[0].messageId;
					this.messageid = evt.messages[0].masageid;
					this.msglist.push(evt.messages[0]);
					const messageUId = evt.messages[0].messageUId;
					const timestamp = evt.messages[0].sentTime;
					this.utilim.clear(this.id);
					RongIMLib.sendReadReceiptMessage(to_id, messageUId, timestamp)
						.then((res) => {
							if (res.code === 0) {
								console.log(res.code, res.data, '----------');
							} else {
								console.log(res.code, res.msg);
							}
						})
						.catch((error) => {
							console.log(error);
						});

					// this.next(1);
				}
			};

			RongIMLib.addEventListener(Events.MESSAGES, listener);

			this.utilim.clear(this.id, this.text);
		},
		onReady() {},
		methods: {
			// 复制
			copyfn(value) {
				uni.setClipboardData({
					data: value
				});
			},
			// 同意交换威胁你
			agree(i) {
				let applyid = '';
				if (this.userid == i.senderUserId) {
					applyid = this.jiaohuanid;
					uni.showToast({
						title: '您已发送申请，待对方同意',
						icon: 'none'
					});
					return;
				}
				applyid = this.otherjiaohuanid;
				this.http('/index/updExchangeStatus', {
					id: applyid,
					status: 1
				}).then((res2) => {
					this.utilim.sendmsg(this.id, this.content, this.extra, this.text, 3).then((res) => {
						console.log('发送消息返回', res);
						res.masageid = 'msg' + res.messageId;
						this.messageid = 'msg' + res.messageId;
						this.content = '';
						this.msglist.push(res);
					});

					// this.next(1);
				});
			},
			// 拒绝交换微信
			refuse(i) {
				let applyid2 = '';
				if (this.userid == i.senderUserId) {
					applyid2 = this.jiaohuanid;
					uni.showToast({
						title: '申请不可被撤回',
						icon: 'none'
					});
					return;
				}
				applyid2 = this.otherjiaohuanid;
				this.http('/index/updExchangeStatus', {
					id: applyid2,
					status: 2
				}).then((res2) => {
					console.log(res2);
					this.utilim.sendmsg(this.id, this.content, this.extra, this.text, 2).then((res) => {
						console.log('发送消息返回', res);
						res.masageid = 'msg' + res.messageId;
						this.messageid = 'msg' + res.messageId;
						this.content = '';
						this.msglist.push(res);
					});

					// this.next(1);
				});
			},
			// 交换微信
			jiaohuanwechat() {
				this.http('/index/exchange', {
					to_user_id: this.id,
					status: 0
				}).then((res2) => {
					console.log('交换微信的请求', res2);
					this.jiaohuanid = res2.data.id;
					console.log('交换微信的请求记录id', this.jiaohuanid);
					this.utilim.sendmsg(this.id, this.content, this.extra, this.text, 1, this.jiaohuanid).then((
						res) => {
						res.masageid = 'msg' + res.messageId;
						this.messageid = 'msg' + res.messageId;
						console.log('发送消息返回', res);
						this.content = '';
						this.msglist.push(res);
					});

					// this.next(1);
				});
			},
			onKeyboardHeightChange(res) {
				const {
					height,
					duration
				} = res;
				// 键盘弹起
				if (height > 0) {
					this.showsend = true;
					this.keybordheight = height;
					this.messageid = '';
					this.$nextTick(() => {
						setTimeout(() => {
							this.messageid = this.msglist[this.msglist.length - 1].masageid;
						}, 100);
					});
					// console.log('键盘弹起', this.keybordheight);
				}
				// 键盘收回
				else {
					this.showsend = false;
					this.keybordheight = 0;

					// console.log('键盘收回', this.keybordheight);
				}
			},
			huifu2() {
				this.morecaozuo = true;
				this.emojishow = false;
			},
			hiufu() {
				uni.hideKeyboard();
			},
			// 下拉刷新
			async gethistory(e) {
				console.log('触发了');
				// this.refresh = true;
				await this.jiazai();
				// this.refresh = false;
			},
			// 交换微信
			changewechat() {
				this.http('/group/addChatUserList', {
					to_user_id: this.id
				}).then((res) => {
					this.http('/index/exchange', {
						to_user_id: this.id,
						status: 0
					}).then((res2) => {
						this.utilim.sendmsg(this.id, this.wechat, this.extra, this.text).then((res) => {
							console.log(res);
							// this.content = '';
							this.msglist.push(res);
							// this.next(1);
						});
					});
				});
				this.$refs.popup.close();
				this.morecaozuo = true;
			},
			// 拉黑对方
			async laheitouser() {
				this.$refs.lahei.close();
				const res = await this.http('/group/addBlack', {
					black_user_id: this.id
				});
				// console.log('拉黑对方', res);
				this.morecaozuo = true;
				uni.showToast({
					title: res.msg
				});
			},
			// 获取个人微信号
			async getuserwechat() {
				const res = await this.http('/user/infor');
				console.log('用户信息', res);
				this.wechat = res.data.wechat;
			},

			onPlay(e) {
				audio.stop();
				audio.src = e;
				audio.play();
				// this.bgAudioManager = uni.createInnerAudioContext()
				// this.bgAudioManager.src = e
				// this.bgAudioManager.play()
			},
			jiazai() {
				const conversation = {
					conversationType: RongIMLib.ConversationType.PRIVATE,
					targetId: this.id
				};

				// 从当前时间开始向前查询
				const option = {
					timestamp: this.msglist[0].sentTime,
					count: 20,
					order: 0
				};

				RongIMLib.getHistoryMessages(conversation, option).then((res) => {
					if (res.code === 0) {
						res.data.list.forEach((item) => {
							item.masageid = 'msg' + item.messageId;
						});
						this.http('/index/displace', {
							data: JSON.stringify(res.data.list)
						}).then((res2) => {
							this.msglist.unshift(...res2.data);
						});
						// this.msglist = res.data.list.concat(this.msglist);

						console.log(res.data.list);
						if (res.data.list.length == 0) {
							uni.showToast({
								title: '历史记录已全部加载完毕',
								icon: 'none'
							});
						}
						console.log(res.data.hasMore);
					} else {
						console.log(res.code, res.msg);
					}
				});
			},
			bq(k) {
				let ary = [];
				ary.push(this.faceList[k]);
				this.content += ary;
				// this.emiashow = false
			},
			// 群资料
			getGroupRes() {
				this.http('/user/infor', {
					user_id: this.id
				}).then((res) => {
					console.log('群资料', res);
					this.otherwechat = res.data.wechat;
					this.title = res.data.nickname;
					this.gender = res.data.gender;
					this.extra.receiveName = res.data.nickname;
					this.extra.receiveHead = res.data.avatar;
					this.extra.receiveid = res.data.id;
					this.extra.allnum = res.data.gender;
					this.getHistoryMessages();
					// uni.setNavigationBarTitle({
					// 	title: res.data.group_name + '(' + res.data.user_nums + ')' // 设置新标题
					// });
				});
			},
			// 获取历史消息
			getHistoryMessages() {
				this.utilim.getHistoryMessages(this.id, this.text).then((res) => {
					// console.log('历史消息----', res);
					// res.forEach((item) => {
					//   item.masageid = 'msg' + item.messageId;
					// });
					let arr = res.map((item) => {
						this.$set(item, 'masageid', `msg${item.messageId}`);
						return item;
					});
					this.http('/index/displace', {
						data: JSON.stringify(arr)
					}).then((res2) => {
						console.log('处理后的消息', res2.data);
						this.msglist = res2.data;
						this.msglist.forEach((item) => {
							if (item.content.applyid) {
								this.otherjiaohuanid = item.content.applyid;
							}
						});
						console.log('进入页面时得id', this.otherjiaohuanid);
						this.messageid = '';
						this.$nextTick(() => {
							setTimeout(() => {
								this.messageid = this.msglist[this.msglist.length - 1]
									.masageid;
							}, 200);
						});
					});

					// console.log('初始化的消息id', this.messageid);
					// this.next(1);
				});
			},

			detail() {
				this.http('/user/infor', {}).then((res) => {
					this.extra.sendName = res.data.nickname;
					this.extra.sendHead = res.data.avatar;
					this.extra.sendid = res.data.id;
				});
			},
			send() {
				if (this.content == '') {
					uni.showToast({
						title: '请输入消息内容',
						icon: 'none'
					});
					return;
				}
				this.http('/group/addChatUserList', {
					to_user_id: this.id
				}).then((res) => {
					this.utilim.sendmsg(this.id, this.content, this.extra, this.text).then((res) => {
						console.log('发送消息返回', res);
						this.content = '';
						res.masageid = 'msg' + res.messageId;
						this.messageid = 'msg' + res.messageId;

						this.msglist.push(res);
					});
				});
			},
			groupguanli() {
				uni.navigateTo({
					url: '/message/groupguanli/groupguanli?id=' + this.id
				});
			},

			goback() {
				uni.navigateBack();
			},
			// 长按语音
			sendvoice() {
				this.$refs.voice.open();
				this.inrecord = true;
				// 录音部分参数
				const recordOptions = {
					duration: 60000, // 录音的时长，单位 ms，最大值 600000（10 分钟）
					sampleRate: 44100, // 采样率
					numberOfChannels: 1, // 录音通道数
					encodeBitRate: 192000, // 编码码率
					format: 'mp3' // 音频格式，选择此格式创建的音频消息，可以在即时通信 IM 全平台（Android、iOS、微信小程序和Web）互通
				};
				this.recordTimer = setTimeout(() => {
					record.start(recordOptions);
					this.recordStartTime = Date.now();
				}, 250);
			},

			// 发送语音消息
			upVoice(e, a) {
				this.http('/group/addChatUserList', {
					to_user_id: this.id
				}).then((res) => {
					uni.uploadFile({
						url: this.$uploadUrl,
						filePath: e.tempFilePath,
						name: 'file',
						success: (rest) => {
							if (JSON.parse(rest.data).code == 1) {
								this.utilim.HQVoiceMessage(a, JSON.parse(rest.data).data.fullurl, this
									.extra, this.id, 'd').then((data) => {
									this.msglist.push(data);
									this.next(1);
								});
							} else {
								this.util.showToast('录音失败');
							}
							console.log(rest);

							// 处理上传成功的结果
						},
						fail: (uploadError) => {
							console.error('upload fail:', uploadError);
							// 处理上传失败的结果
						}
					});

					// this.util.uploadFile(e).then(rest => {
					// 	this.utilim.HQVoiceMessage(a, rest.fullurl.this.extra, this.text).then(data => {
					// 		this.msglist.push(data)
					// 		this.next(1)
					// 	})

					// })
				});
			},
			overvoice() {
				this.$refs.voice.close();
				this.inrecord = false;
				record.stop();
				let that = this;
				// 监听录音暂停的回调参数
				record.onStop((res) => {
					console.log(res, '录音回调地址');
					const time = Date.now() - this.recordStartTime;
					if (time < 1000) {
						return this.util.showToast('请说话久一点');
					}
					// 某些平台没有返回录音时长和文件大小，此项自己添加一个大概值
					if (!res.duration) res.duration = time;

					this.upVoice(res, time);
				});
				record.onError((err) => {
					console.log(err);
					this.util.showToast('获取录音失败', err);
				});
			},

			// 发送图片
			sendimg() {
				this.http('/group/addChatUserList', {
					to_user_id: this.id
				}).then((res) => {
					this.utilim.sendimg(this.id, this.extra, this.text).then((res) => {
						this.msglist.push(res);
						this.next(1);
					});
				});
			},
			next(e) {
				if (e == 1) {
					this.$nextTick(() => {
						setTimeout(() => {
							const query = uni.createSelectorQuery();
							query
								.select('#bottomid')
								.boundingClientRect((rect) => {})
								.exec((e) => {
									uni.pageScrollTo({
										duration: 50,
										scrollTop: 999999999999
									});
								});
						}, 50);
					});
				}
			}
		},
		onUnload() {
			uni.offKeyboardHeightChange(this.onKeyboardHeightChange);
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		.box {
			box-sizing: border-box;
			width: 580rpx;
			height: 340rpx;
			border-radius: 30rpx;
			background: #e3e3e3;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
		}

		box-sizing: border-box;

		.jiaohuan {
			box-sizing: border-box;
			width: 580rpx;
			height: 340rpx;
			background: #ffffff;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
			margin-left: 50rpx;
			margin-top: 20rpx;

			.header {
				box-sizing: border-box;
				width: 580rpx;
				height: 232rpx;
				background: linear-gradient(90deg,
						rgba(255, 255, 255, 0) 0%,
						rgba(236, 250, 220, 0.4) 15%,
						#a4e9ff 36%,
						rgba(194, 193, 255, 0.68) 60%,
						rgba(244, 208, 246, 0.63) 77%,
						rgba(255, 255, 255, 0) 100%);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
			}

			.btn {
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				margin-top: 16rpx;
			}
		}

		.wechatcard {
			box-sizing: border-box;
			width: 460rpx;
			height: 232rpx;
			background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(236, 250, 220, 0.4) 0%, #a4e9ff 36%, rgba(194, 193, 255, 0.68) 60%, rgba(255, 255, 255, 0) 100%);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin-left: 130rpx;
			margin-bottom: 30rpx;
			margin-top: 30rpx;

			.copy {
				box-sizing: border-box;
				width: 404rpx;
				height: 68rpx;
				background: #37c1ff;
				text-align: center;
				line-height: 68rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #ffffff;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				margin-left: 20rpx;
			}
		}

		.left {
			display: flex;
			margin-bottom: 60rpx;
			margin-top: 15rpx;
		}

		.right {
			display: flex;
			justify-content: flex-end;
			margin-top: 15rpx;
		}

		.keybord {
			box-sizing: border-box;
			padding-top: 30rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			background: #ffffff;
			box-shadow: 0rpx -4rpx 12rpx 2rpx rgba(0, 0, 0, 0.12);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}

		.voice {
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 300rpx;
			height: 300rpx;
			background: #636363;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
		}
	}
</style>